<template>
  <el-dialog
    v-model="diagVisable"
    title="忘记密码"
    width="40%"
    center
    align-center
    @close="cancel()"
  >
    <el-tabs type="border-card" v-model="name" >
      <el-tab-pane label="手机验证" name="tel">
        <el-form
          ref="formRef1"
          :model="form1"
          label-width="100px"
          class="demo-ruleForm"
          :rules="rules"
        >
          <el-form-item label="手机号" prop="tel">
            <el-input v-model="form1.tel" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-row>
              <el-col :span="11">
                <el-input v-model="form1.code" type="text" autocomplete="off" />
              </el-col>
              <el-col :span="6"></el-col>
              <el-col :span="7"
                ><el-button
                  style="width: 100px"
                  type="primary"
                  ref="btn1"
                  :disabled="isDisabled1"
                  @click="getVlCode()"
                  >获取验证码</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form1.password"
              type="password"
              placeholder="请设置6~12位密码"
            />
          </el-form-item>
          <el-form-item label="新密码" prop="checkpassword">
            <el-input
              v-model="form1.checkpassword"
              id="inputValue1"
              type="password"
              placeholder="请再次输入密码"
            />
          </el-form-item>
          <el-form-item label="密码强度" class="strong">
            <el-row style="height: 20px">
              <div class="input_span">
                <span id="one"></span>
                <span id="two"></span>
                <span id="three"></span>
              </div>
            </el-row>
            <el-row style="height: 20px">
              <span id="font">弱</span>
              <span id="font">中</span>
              <span id="font">强</span>
            </el-row>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- <el-tab-pane label="邮箱验证" name="email">
        <el-form
          ref="formRef2"
          :model="form2"
          label-width="100px"
          class="demo-ruleForm"
          :rules="rules"
        >
          <el-form-item label="手机号" prop="tel">
            <el-input v-model="form2.tel" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="邮箱号" prop="email">
            <el-input v-model="form2.email" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-row>
              <el-col :span="11">
                <el-input v-model="form2.code" type="text" autocomplete="off" />
              </el-col>
              <el-col :span="4"></el-col>
              <el-col :span="9"
                ><el-button
                  type="primary"
                  ref="btn2"
                  :disabled="isDisabled2"
                  @click="getElCode()"
                  >获取验证码</el-button
                >
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              v-model="form2.password"
              type="password"
              placeholder="请设置6~12位密码"
            />
          </el-form-item>
          <el-form-item label="新密码" prop="checkpassword">
            <el-input
              v-model="form2.checkpassword"
              id="inputValue2"
              type="password"
              placeholder="请再次输入密码"
            />
          </el-form-item>
          <el-form-item label="密码强度" class="strong">
            <el-row style="height: 20px">
              <div class="input_span">
                <span id="one2"></span>
                <span id="two2"></span>
                <span id="three2"></span>
              </div>
            </el-row>
            <el-row style="height: 20px">
              <span id="font">弱</span>
              <span id="font">中</span>
              <span id="font">强</span>
            </el-row>
          </el-form-item>
        </el-form>
      </el-tab-pane> -->
    </el-tabs>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit()"> 重置 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { generate, sendSms, verification, resetPassword } from "@/api/user";
import { ElMessage } from "element-plus";
export default {
  props: ["diagVisable"],
  // 数据源
  data() {
    // 验证手机的规则
    var checkMobile = (rule, value, callback) => {
      // 手机号正则表达式
      const regMobile =
        /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      if (regMobile.test(value)) {
        // 合法的手机号
        return callback();
      }
      callback(new Error("请输入合法的手机号"));
    };
    // 验证邮箱的规则
    var checkEmail = (rule, value, callback) => {
      // 邮箱正则表达式
      const regEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (regEmail.test(value)) {
        // True 合法的邮箱
        return callback();
      }
      callback(new Error("请输入合法的邮箱"));
    };
    return {
      name: "tel",
      form1: {
        tel: "",
        code: "",
        password: "",
        checkpassword: "",
      },
      form2: {
        tel: "",
        email: "",
        code: "",
        password: "",
        checkpassword: "",
      },
      count1: 60,
      count2: 60,
      isDisabled1: false,
      isDisabled2: false,
      rules: {
        tel: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: checkMobile,
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱号", trigger: "blur" },
          {
            validator: checkEmail,
            trigger: "blur",
          },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            max: 12,
            min: 6,
            message: "密码至少为6位，最多为12位",
            trigger: "blur",
          },
        ],
        checkpassword: [
          { required: true, message: "请再次输入密码", trigger: "blur" },
        ],
      },
      timer1: null,
      timer2: null,
      msgText: "",
      msgText2: "",
    };
  },
  //生命周期函数---
  mounted() {},
  watch: {
    "form1.password": {
      handler(newname, oldname) {
        this.msgText = this.checkStrong(newname);
        if (this.msgText > 1 || this.msgText == 1) {
          document.getElementById("one").style.background = "red";
        } else {
          document.getElementById("one").style.background = "#eee";
        }
        if (this.msgText > 2 || this.msgText == 2) {
          document.getElementById("two").style.background = "orange";
        } else {
          document.getElementById("two").style.background = "#eee";
        }
        if (this.msgText == 4) {
          document.getElementById("three").style.background = "#00D1B2";
        } else {
          document.getElementById("three").style.background = "#eee";
        }
      },
    },
    "form2.password": {
      handler(newname, oldname) {
        this.msgText2 = this.checkStrong(newname);
        if (this.msgText2 > 1 || this.msgText2 == 1) {
          document.getElementById("one2").style.background = "red";
        } else {
          document.getElementById("one2").style.background = "#eee";
        }
        if (this.msgText2 > 2 || this.msgText2 == 2) {
          document.getElementById("two2").style.background = "orange";
        } else {
          document.getElementById("two2").style.background = "#eee";
        }
        if (this.msgText2 == 4) {
          document.getElementById("three2").style.background = "#00D1B2";
        } else {
          document.getElementById("three2").style.background = "#eee";
        }
      },
    },
  },
  //基本方法
  methods: {
    changeTab(name) {
      // console.log(name);
      // console.log(this.name);
    },
    checkStrong(sValue) {
      var modes = 0;
      //正则表达式验证符合要求的
      if (sValue.length < 1) return modes;
      if (/\d/.test(sValue)) modes++; //数字
      if (/[a-z]/.test(sValue)) modes++; //小写
      if (/[A-Z]/.test(sValue)) modes++; //大写
      if (/\W/.test(sValue)) modes++; //特殊字符

      //逻辑处理
      switch (modes) {
        case 1:
          return 1;
          break;
        case 2:
          return 2;
          break;
        case 3:
        case 4:
          return sValue.length < 4 ? 3 : 4;
          break;
      }
      return modes;
    },
    isEqual1() {
      if (this.form1.password === this.form1.checkpassword) return true;
      else return false;
    },
    isEqual2() {
      if (this.form2.password === this.form2.checkpassword) return true;
      else return false;
    },
    submit() {
      if (this.name == "tel") {
        this.submit1();
      } else if (this.name == "email") {
        this.submit2();
      }
    },
    //手机 相关方法
    getVlCode() {
      this.$refs.formRef1.validateField(["tel"], (valid, fields) => {
        if (valid) {
          if (this.isDisabled1) return;
          this.isDisabled1 = true;
          this.timer1 = setInterval(() => {
            this.count1--;
            this.$refs.btn1.$el.innerText = `${this.count1}s后重新发送`;
            if (this.count1 < 0) {
              clearInterval(timer1);
              this.count1 = 60;
              this.isDisabled1 = false;
              this.$refs.btn1.$el.innerText = `重新获取`;
            }
          }, 1000);
          sendSms(this.form1.tel).then((res) => {
            if (res.code == 200) {
              ElMessage({
                type: "success",
                message: "发送成功",
              });
            } else {
              ElMessage({
                type: "info",
                message: "发送失败",
              });
            }
          });
        }
      });
    },
    submit1() {
      this.$refs.formRef1.validate((valid, fields) => {
        if (valid) {
          if (this.isEqual1()) {
            resetPassword(
              this.form1.tel,
              this.form1.code,
              this.form1.password
            ).then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.cancel();
                ElMessage({
                  message: "重置成功!",
                  type: "success",
                });
              } else {
                ElMessage({
                  type: "error",
                  message: "验证码错误或已过期",
                });
              }
            });
          } else {
            ElNotification({
              title: "错误提示",
              type: "warning",
              message: "两次输入密码不一致，请重新输入",
            });
          }
        }
      });
    },
    //邮箱相关方法
    // getElCode() {
    //   this.$refs.formRef2.validateField(["tel", "email"], (val) => {
    //     if (val) {
    //       if (this.isDisabled2) return;
    //       this.isDisabled2 = true;
    //       this.timer2 = setInterval(() => {
    //         this.count2--;
    //         this.$refs.btn2.$el.innerText = `${this.count2}s后重新发送`;
    //         if (this.count2 < 0) {
    //           clearInterval(this.timer2);
    //           this.count2 = 60;
    //           this.isDisabled2 = false;
    //           this.$refs.btn2.$el.innerText = `重新获取`;
    //         }
    //       }, 1000);
    //       generate(this.form2.tel, this.form2.email).then((res) => {
    //         if (res.code == 200) {
    //           ElMessage({
    //             type: "success",
    //             message: "发送成功",
    //           });
    //         } else {
    //           ElMessage({
    //             type: "info",
    //             message: "发送失败",
    //           });
    //         }
    //       });
    //     }
    //   });
    // },
    // submit2() {
    //   this.$refs.formRef2.validate((valid, fields) => {
    //     if (valid) {
    //       if (this.isEqual2()) {
    //         resetPassword(
    //           this.form2.tel,
    //           this.form2.code,
    //           this.form2.password
    //         ).then((res) => {
    //           console.log(res);
    //           if (res.code == 200) {
    //             this.cancel();
    //             ElMessage({
    //               message: "重置成功!",
    //               type: "success",
    //             });
    //           } else {
    //             ElMessage({
    //               type: "error",
    //               message: "验证码错误或已过期",
    //             });
    //           }
    //         });
    //       } else {
    //         ElNotification({
    //           title: "错误提示",
    //           type: "warning",
    //           message: "两次输入密码不一致，请重新输入",
    //         });
    //       }
    //     }
    //   });
    // },
    cancel() {
      this.$refs.formRef1.resetFields();
      // this.$refs.formRef2.resetFields();
      this.$emit("childsolt");
    },
  },
  beforeUnmount() {
    if (this.timer1) window.clearInterval(this.timer1);
    // if (this.timer2) window.clearInterval(this.timer2);
  },
};
</script>

<style scoped>
.input_span {
  display: flex;
  border-radius: 50px;
  background: rgb(238, 238, 238);
}
#one {
  height: 20px;
  width: 120px;
}
#two {
  height: 20px;
  width: 120px;
}
#three {
  height: 20px;
  width: 120px;
}
#one2 {
  height: 20px;
  width: 120px;
}
#two2 {
  height: 20px;
  width: 120px;
}
#three2 {
  height: 20px;
  width: 120px;
}
#font {
  height: 18px;
  line-height: 18px;
  width: 120px;
  text-align: center;
}
</style>